
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">

<title>Mtons UI</title>

<!-- Bootstrap core CSS -->
<link href="../../dist/css/bootstrap.min.css" rel="stylesheet">

<!-- Custom styles for this template -->
<link href="../../dist/css/dashboard.css" rel="stylesheet">

<link href="../../theme/default/style.css" rel="stylesheet">

<script src="../../depends/jquery.min.js"></script>
</head>

<body>
	<div class="container-fluid">

		<div class="row">
			<h2 class="sub-header">Tab</h2>

			<p>选项卡</p>
			<div class="table-responsive">
				<table class="table table-striped" style="width: 600px;">
					<tr>
						<th>方法</th>
						<th>说明</th>
					</tr>
					<tr>
						<td>width</td>
						<td>宽度</td>
					</tr>
					<tr>
						<td>height</td>
						<td>高度</td>
					</tr>
					<tr>
						<td>plain</td>
						<td>是否显示 header, 默认 true</td>
					</tr>
					<tr>
						<td>fit</td>
						<td>设置适应它的父容器的大小, 默认 false</td>
					</tr>
					<tr>
						<td>border</td>
						<td>是否使用边线, 默认 true</td>
					</tr>
					<tr>
						<td>onSelect</td>
						<td>选中事件, function (title) {}</td>
					</tr>
					<tr>
						<td>onClose</td>
						<td>关闭事件, function (title) {}</td>
					</tr>
				</table>
			</div>
			
			<div>
				<h4>示例：</h4>
				<button id="add">add</button>
				
				<div id="tab" style="width:500px;height:200px;">
					<div title="Tab1" closable="true" style="padding:20px;">
						<div>
							<p>tab1</p>
						</div>
					</div>
					<div title="Tab2" style="padding:20px;">
						<div>
							<p>tab2</p>
						</div>
					</div>
				</div>
				
				<br>
				
				<pre>
var tab = new mtons.Tab($('#tab'), {});
				</pre>
			</div>
		</div>
	</div>
	
	<script type="text/javascript" src="../../src/core.js"></script>
	<script type="text/javascript" src="../../src/tab.js"></script>
	<script type="text/javascript">
	$(function(){
		var tab = new mtons.Tab($('#tab'), {
		});
		
		var tabCount = 5;
		$('#add').click(function () {
			tab.addTab({id : 'tab' + tabCount, title : 'tab' + tabCount, content : 'add test' + tabCount});
			tabCount ++;
		});
		
		tab.addTab({id : 'tab111' + tabCount, title : 'tab1111' + tabCount, href : 'http://www.baidu.com'});
	});
	</script>
</body>
</html>
